<template>
  <div class="hello">
    <!--将获取到的信息画到画布上-->
    <canvas id="loginQrcode"></canvas>
  </div>
</template>

<script>
  import QRCode from 'qrcode'

  function drawQrcode (newQrcode) {
    let canvas = document.getElementById('loginQrcode')
    QRCode.toCanvas(
      canvas,
      newQrcode,
      {
        margin: 0.5,
        width: 250,
        color: {
          dark: '#677eff',
          light: '#FFFFFF'
        }
      }, function (error, url) {
        if (error) {
          console.error(error)
          throw error
        }
        console.info(url)
      })
  }

  export default {
    // 全局感知
    name: 'Qrcode',

    // 本地状态
    data () {
      return {
        qrcode: 'xiami'
      }
    },

    mounted () {
      drawQrcode(this.qrcode)
    },

    computed: {},

    watch: {
      // 通过监听获取数据
      qrcode: function (newQrcode) {
        console.debug('二维码内容：%s', newQrcode)
        drawQrcode(newQrcode)
      }
    },

    method: {}

  }
</script>

<style scoped>

</style>
